<template>
	<view style="position:relative; width: 100%;height: 100%;">
		<VideoInfo class="video_info" :username="videoData.username" :message="videoData.msg"
			:videoDurationTime="durationTime" :videoCurrentTime="currentTime"></VideoInfo>
		<SideBar class="side_bar" :avatar="videoData.href" :like="videoData.like" :likeN="videoData.like_n" :playNumber="videoData.playNumber" :smsN="videoData.sms_n"></SideBar>
		<video class="video" :controls="false" :ref="videoRef" @click="videoClickHandle" :show-loading="false"
			@loadedmetadata="loadVideo" @timeupdate="timeUpdate" :src="videoData.src">
		</video>
		<u-icon v-show="!videoData.playIng" name="play-right-fill" size="60" class="video_play"
			color="rgba(255,255,255,.2)"  @click="videoClickHandle"></u-icon>
	</view>
</template>

<script>
	import VideoInfo from "./videoInfo.vue"
	import SideBar from "./sideBar.vue"
	export default {
		name: "MyVideo",
		components: {
			VideoInfo,
			SideBar
		},
		data() {
			return {
				videoRef: uni.$u.guid(20),
				currentTime: 0, // 视频播放进度
				durationTime: 0 // 视频总时长
				// videoPlay: false
				// videoData: 
			}
		},
		props: {
			videoData: Object
		},
		watch: {
			"videoData.playIng"(newVal) {
				const {
					videoRef
				} = this
				if (newVal) {
					this.$refs[videoRef].play()
				} else {
					this.$refs[videoRef].pause()
				}
			},
			immediate: true

		},
		methods: {
			scrollHandle() {
				const offset = this.$el.getBoundingClientRect();
				const offsetTop = offset.top;
				const offsetBottom = offset.bottom;
				// const offsetHeight = offset.height;
				// 进入可视区域
				// console.log(offsetTop,offsetBottom)
				if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
					console.log(this.videoRef, '进入可视区域');

				} else {
					console.log(this.videoRef, '移出可视区域');

				}
			},
			/* 播放进度发生变化 */
			timeUpdate(event) {
				this.currentTime = event.detail.currentTime
			},
			/* 视频元数据加载完毕 */
			loadVideo() {
				const {
					videoRef
				} = this
				this.durationTime = this.$refs[videoRef].durationTime
			},
			videoClickHandle() {
				const id = this.videoData._id
				this.$emit("videoPlayChange", id)
				// if (this.videoPlay) {
				// 	this.$refs.nowVideo.pause()
				// } else {
				// 	this.$refs.nowVideo.play()
				// }
			},
		}
	}
</script>

<style>
	.video {
		width: 100%;
		height: 100%;
	}

	.video_info,
	.side_bar {
		position: absolute;
		z-index: 99;
	}

	.video_info {
		bottom: 0;
	}

	.video_play {
		position: absolute;
		z-index: 100;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	::v-deep .uni-video-cover {
		display: none;
	}
</style>
